<template>
  <div class="merchandise-management views-container">
    <div class="wlm-table">
      <div class="wlm-table-hearder-btn">
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="tableFormatData.reservelist.files"
        >
          <el-form-item label="">
            <el-form-item>
              <el-select
                placeholder="请选择状态"
                v-model="tableFormatData.reservelist.files.type"
              >
                <el-option
                  label="已审核"
                  :value="1"
                ></el-option>
                <el-option
                  label="未审核"
                  :value="2"
                ></el-option>
                <el-option
                  label="未预约"
                  :value="3"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input
                @keyup.enter.native="filesSerch"
                v-model="tableFormatData.reservelist.files.order_no"
                placeholder="请输入订单号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                @keyup.enter.native="filesSerch"
                v-model="tableFormatData.reservelist.files.mobile"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="filesSerch"
              >筛选</el-button>
              <el-button
                type="text"
                @click="filesEmpty"
              >清空筛选条件</el-button>
            </el-form-item>
          </el-form-item>
        </el-form>
      </div>
      <div class="wlm-table-content">
        <el-table
          :ref="tableFormatData.reservelist.key"
          :data="tableFormatData.reservelist.tableData"
          style="width:100%"
        >
          <el-table-column
            prop="avatarUrl"
            label="申请人信息"
            width="180"
          >
            <template slot-scope="scope">
              <div class="wlm-table-logos">
                <img
                  class="logo"
                  :src="scope.row.avatarUrl"
                >
                <span style="font-size:12px">{{scope.row.nickName}}</span>
                <div style="font-size:12px">{{scope.row.nickName}}{{scope.row.mobile}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            label="商品名称"
            width="180"
          >
            <template slot-scope="scope">
              {{scope.row.order_goods[0].goods_attr ||scope.row.order_goods[0].goods_name}}
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="订单号"
          >
            <template slot-scope="scope">
              {{scope.row.order_no}}
            </template>
          </el-table-column>

          <el-table-column
            prop="date"
            label="价格"
          >
            <template slot-scope="scope">
              {{scope.row.order_goods[0].goods_price}}
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="支付方式"
          >
            <template slot-scope="scope">
              <div class="flex-col  pad-t-50 pad-b-50">
                <span v-if="scope.row.pay_type=='balance'">{{'余额支付'}}</span>
                <span v-if="scope.row.pay_type=='admin'">{{'后台支付'}}</span>
                <span v-if="scope.row.pay_type=='wechat'">{{'微信支付'}}</span>
                <span v-if="scope.row.pay_type=='alipay'">{{'支付宝支付'}}</span>
                <span v-if="scope.row.pay_type=='zero'">{{'零元购'}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="预约时间"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.reserve_time!=0">{{ scope.row.reserve_time|parseTime('{y}-{m}-{d}')}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="状态"
          >
            <template slot-scope="scope">
              <el-tag
                style="width: 50px;font-size:12px;background-color: rgb(255, 233, 207);color:#ec8205;border-color: #fde2e2;"
                size="mini"
                v-if="scope.row.reserve_time==0"
              >未预约</el-tag>
              <el-tag
                style="width: 50px;font-size:12px;background-color:#f0f9eb;color:#67c23a;border-color: #e1f3d8"
                size="mini"
                v-if="scope.row.audit_status==1"
              >已审核</el-tag>
              <el-tag
                style="width: 50px;font-size:12px;background-color:#fef0f0;color:#f56c6c;border-color: #fde2e2;"
                size="mini"
                v-if="scope.row.audit_status==2"
              >未审核</el-tag>
              <el-tag
                style="width: 50px;font-size:12px;background-color:#fef0f0;color:#ec8205;border-color: #fde2e2;"
                size="mini"
                v-if="scope.row.audit_status==3"
              >已拒绝</el-tag>
            </template>

          </el-table-column>
          <el-table-column
            prop="date"
            label="拒绝原因"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.refuse_cause}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="操作"

          >
            <!--  -->
            <template
              slot-scope="scope"
              v-if="scope.row.reserve_time!=0 && scope.row.audit_status==2"
            >
              <!-- <el-button class="wlm-text" type="text" @click="submit(scope.row.goods_id)">通过</el-button>
          <el-button class="wlm-text" type="text" @click="cancel(scope.row.goods_id)">拒绝</el-button> -->
              <el-button
                class="wlm-text"
                type="text"
                @click="changeTableItem({audit_status:1,apply_id:scope.row.apply_id},tableFormatData.reservelist.change.reserve)"
              >通过</el-button>
              <!-- <el-button class="wlm-text" type="text" @click="changeTableItem({audit_status:3,apply_id:scope.row.apply_id},tableFormatData.reservelist.change.reserve),clickbtn()">拒绝</el-button> -->
              <el-button
                class="wlm-text"
                type="text"
                 @click="handleEdit(scope.$index, scope.row)"
              >拒绝</el-button>
              <el-dialog
                title="请输入拒绝原因"
                :visible.sync="dialogVisible"
                width="30%"
              >
                <el-input v-model="input"></el-input>
                <span
                  slot="footer"
                  class="dialog-footer"
                >
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <!-- <el-button
                    type="primary"
                    @click="changeTableItem({audit_status:3,apply_id:this.tableFormatData.reservelist.files.apply_id,refuse_cause:input},tableFormatData.reservelist.change.reserve),dialogVisible = false"
                  >确 定</el-button> -->
                  <el-button
                    type="primary"
                    @click="btndvg"
                  >确 定</el-button>
                </span>
              </el-dialog>
            </template>
          </el-table-column>

        </el-table>
        <div class="pagination-content flex-row flex-justify-e flex-align-c">
          <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
            :current-page.sync="tableFormatData.reservelist.pagination.page"
            :page-sizes="tableFormatData.reservelist.pagination.pagesizes"
            :page-size.sync="tableFormatData.reservelist.pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="hasTableData?tableFormatData.reservelist.pagination.total : 0"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  reserveApplyList,
  agreeReserve
} from '@/api/orders'
import ShareLink from '@/components/ShareLink/index'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table')],
  name: 'TableDatasle',
  components: {
    ShareLink
  },
  data() {
    return {
      dialogVisible: false,
      input: '',
      tableFormatData: {
        current: 'reservelist',
        reservelist: {
          key: 'reservelist',
          api: {
            getList: reserveApplyList
            // delList: goodsDelete
          },

          tableData: [],
          files: {// 传递参数
            type: '',
            order_no: '',
            mobile: '',
            refuse_cause: '',
            apply_id: ''
            // goodsType: 'sale',
            // name: '',
            // business_id: '',
            // order: '',
            // goods_no: '',
            // category_id: '',
            // ids: [],
            // checkall: '0',
            // Recycle: '0',
            // redirect: 'goods_id',
            // is_reservation:''
          },
          change: {
            reserve: {
              key: 'reserve',
              api: agreeReserve
            }
          },
          otherData: {},
          pagination: {// 分页
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  methods: {
    // clickbtn() {
    //   this.dialogVisible = true
    // }
    handleEdit(index, row) {
      this.dialogVisible = true
      this.listIndex = index
      this.editObj = row
      this.tableFormatData.reservelist.files.apply_id = this.editObj.apply_id

      console.log(this.tableFormatData.reservelist.files.apply_id)
    },
    btndvg() {
      this.dialogVisible = false
      this.changeTableItem({ audit_status: 3, apply_id: this.tableFormatData.reservelist.files.apply_id, refuse_cause: this.input }, this.tableFormatData.reservelist.change.reserve)
    }
  }
}
</script>
<style lang="less" scoped>
</style>
